<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>echarts | 牛牛&amp;blog</title><meta name="author" content="牛牛"><meta name="copyright" content="牛牛"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="echarts官网： https:&#x2F;&#x2F;echarts.apache.org&#x2F;zh&#x2F;index.html echarts社区： https:&#x2F;&#x2F;www.makeapie.com&#x2F;     echarts的官方社区已经不在维护， echarts社区镜像网站,与之前官方社区功能一样: https:&#x2F;&#x2F;www.makeapie.cn&#x2F;echarts 其它echarts相关的社区:  https:&#x2F;&#x2F;mad">
<meta property="og:type" content="article">
<meta property="og:title" content="echarts">
<meta property="og:url" content="https://code-ran.gitee.io/2023/01/06/echarts/index.html">
<meta property="og:site_name" content="牛牛&amp;blog">
<meta property="og:description" content="echarts官网： https:&#x2F;&#x2F;echarts.apache.org&#x2F;zh&#x2F;index.html echarts社区： https:&#x2F;&#x2F;www.makeapie.com&#x2F;     echarts的官方社区已经不在维护， echarts社区镜像网站,与之前官方社区功能一样: https:&#x2F;&#x2F;www.makeapie.cn&#x2F;echarts 其它echarts相关的社区:  https:&#x2F;&#x2F;mad">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="">
<meta property="article:published_time" content="2023-01-06T06:06:43.000Z">
<meta property="article:modified_time" content="2023-11-02T03:32:07.115Z">
<meta property="article:author" content="牛牛">
<meta property="article:tag" content="echarts">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content=""><link rel="shortcut icon" href="/img/myfavicon.png"><link rel="canonical" href="https://code-ran.gitee.io/2023/01/06/echarts/"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: undefined,
  translate: {"defaultEncoding":2,"translateDelay":0,"msgToTraditionalChinese":"繁","msgToSimplifiedChinese":"簡"},
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '天',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: undefined,
  source: {
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: false,
  isAnchor: false,
  percent: {
    toc: true,
    rightside: false,
  }
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: 'echarts',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2023-11-02 11:32:07'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const detectApple = () => {
      if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script><link rel="stylesheet" href="/css/style.css"><meta name="generator" content="Hexo 5.4.0"></head><body><div id="loading-box"><div class="loading-left-bg"></div><div class="loading-right-bg"></div><div class="spinner-box"><div class="configure-border-1"><div class="configure-core"></div></div><div class="configure-border-2"><div class="configure-core"></div></div><div class="loading-word">加载中...</div></div></div><script>const preloader = {
  endLoading: () => {
    document.body.style.overflow = 'auto';
    document.getElementById('loading-box').classList.add("loaded")
  },
  initLoading: () => {
    document.body.style.overflow = '';
    document.getElementById('loading-box').classList.remove("loaded")

  }
}
window.addEventListener('load',()=> { preloader.endLoading() })

if (false) {
  document.addEventListener('pjax:send', () => { preloader.initLoading() })
  document.addEventListener('pjax:complete', () => { preloader.endLoading() })
}</script><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="/img/ys.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">52</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">26</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">26</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">牛牛&amp;blog</a></span><div id="menus"><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">echarts</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2023-01-06T06:06:43.000Z" title="发表于 2023-01-06 14:06:43">2023-01-06</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2023-11-02T03:32:07.115Z" title="更新于 2023-11-02 11:32:07">2023-11-02</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/echarts%E7%9B%B8%E5%85%B3/">echarts相关</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="echarts"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><p>echarts官网：</p>
<p><strong><a target="_blank" rel="noopener" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org/zh/index.html</a></strong></p>
<p>echarts社区：</p>
<p><strong><a target="_blank" rel="noopener" href="https://www.makeapie.com/">https://www.makeapie.com/</a></strong>     echarts的官方社区已经不在维护，</p>
<p>echarts社区镜像网站,与之前官方社区功能一样:</p>
<p><strong><a target="_blank" rel="noopener" href="https://www.makeapie.cn/echarts">https://www.makeapie.cn/echarts</a></strong></p>
<p>其它echarts相关的社区:</p>
<ul>
<li><a target="_blank" rel="noopener" href="https://madeapie.com/#/">https://madeapie.com/#/</a></li>
<li><a target="_blank" rel="noopener" href="http://echarts.zhangmuchen.top/#/index">http://echarts.zhangmuchen.top/#/index</a></li>
<li><a target="_blank" rel="noopener" href="https://www.isqqw.com/">https://www.isqqw.com/</a></li>
<li><a target="_blank" rel="noopener" href="http://ppchart.com/#/">http://ppchart.com/#/</a></li>
<li><a target="_blank" rel="noopener" href="http://192.144.199.210/forum.php?mod=forumdisplay&amp;fid=2">http://192.144.199.210/forum.php?mod=forumdisplay&amp;fid=2</a></li>
<li><a target="_blank" rel="noopener" href="http://chartlib.datains.cn/echarts">http://chartlib.datains.cn/echarts</a></li>
</ul>
<h5 id="1、饼图嵌套"><a href="#1、饼图嵌套" class="headerlink" title="1、饼图嵌套:"></a>1、饼图嵌套:</h5><p> (1)练习图例:</p>
<p><img src="/2023/01/06/echarts/image-20230106150743220.png" alt="image-20230106150743220"></p>
<p>(2)配置项:</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">option = &#123;</span><br><span class="line">  tooltip: &#123;</span><br><span class="line">    trigger: &#x27;item&#x27;,</span><br><span class="line">    backgroundColor: &#x27;rgba(255, 255, 255, 0.8)&#x27;</span><br><span class="line">  &#125;,</span><br><span class="line">  title: [</span><br><span class="line">    &#123;</span><br><span class="line">      text: &#x27;测试比例&#x27;,</span><br><span class="line">      left: &#x27;center&#x27;,</span><br><span class="line">      top: &#x27;45%&#x27;,</span><br><span class="line">      textStyle: &#123; color: &#x27;#e7ebf0&#x27;, fontSize: 15 &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">      text: &#x27;90%&#x27;,</span><br><span class="line">      left: &#x27;center&#x27;,</span><br><span class="line">      top: &#x27;40%&#x27;,</span><br><span class="line">      textStyle: &#123; color: &#x27;#3acae4&#x27;, fontSize: 31 &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  ],</span><br><span class="line">  legend: &#123;</span><br><span class="line">    left: &#x27;center&#x27;,</span><br><span class="line">    bottom: &#x27;33%&#x27;,</span><br><span class="line">    //控制legend的布局方向</span><br><span class="line">    orient: &#x27;vertical&#x27;,</span><br><span class="line">    //控制legend的布局大小</span><br><span class="line">    itemWidth: 7,</span><br><span class="line">    itemHeight: 7,</span><br><span class="line">    //lengend数据显示配置,echarts 给formatter文字添加不同颜色</span><br><span class="line">    formatter: function (value) &#123;</span><br><span class="line">      if (value.length &gt; 5) &#123;</span><br><span class="line">        return value.substring(0, 4) + &#x27;...&#x27; + &#x27;&#123;a|&#x27; + &#x27;|  20%&#x27; + &#x27;&#125;&#x27; + &#x27;20&#x27;;</span><br><span class="line">      &#125; else &#123;</span><br><span class="line">        return value + &#x27;&#123;a|&#x27; + &#x27;|  20%&#x27; + &#x27;&#125;&#x27; + &#x27;20&#x27;;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    textStyle: &#123;</span><br><span class="line">      fontSize: 15,</span><br><span class="line">      //在rich中给formatter添加个别字体颜色</span><br><span class="line">      rich: &#123;</span><br><span class="line">        a: &#123;</span><br><span class="line">          color: &#x27;#03a9f4&#x27;,</span><br><span class="line">          padding: [0, 10],</span><br><span class="line">          fontSize: 15</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  cursor: &#x27;pointer&#x27;,</span><br><span class="line">  series: [</span><br><span class="line">    &#123;</span><br><span class="line">      name: &#x27;stnPie&#x27;,</span><br><span class="line">      type: &#x27;pie&#x27;,</span><br><span class="line">      radius: [&#x27;25%&#x27;, &#x27;33%&#x27;],</span><br><span class="line">      center: [&#x27;50%&#x27;, &#x27;43%&#x27;],</span><br><span class="line">      //最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互。</span><br><span class="line">      label: &#123;</span><br><span class="line">        show: false,</span><br><span class="line">        position: &#x27;center&#x27;</span><br><span class="line">      &#125;,</span><br><span class="line">      labelLine: &#123;</span><br><span class="line">        show: false</span><br><span class="line">      &#125;,</span><br><span class="line">      itemStyle: &#123;</span><br><span class="line">        normal: &#123;</span><br><span class="line">          borderWidth: 2.5, // 间距的宽度</span><br><span class="line">          borderColor: &#x27;#ffffff&#x27; //背景色</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      data: [</span><br><span class="line">        &#123;</span><br><span class="line">          value: 300,</span><br><span class="line">          name: &#x27;测试数据1&#x27;,</span><br><span class="line">          //配置样式</span><br><span class="line">          itemStyle: &#123;</span><br><span class="line">            normal: &#123;</span><br><span class="line">              //颜色渐变</span><br><span class="line">              // 1, 1, 1, 0,  //(下-上 渐变)</span><br><span class="line">              // 1, 1, 0, 0,  //(左上-右下 渐变)</span><br><span class="line">              // 1, 0, 0, 0,  //(左-右 渐变)</span><br><span class="line">              // 0, 1, 1, 0,  //(右上-左下 渐变)</span><br><span class="line">              // 0, 1, 1, 1,  //(左-右 渐变)</span><br><span class="line">              // 1, 0, 1, 1,  //(上-下 渐变)</span><br><span class="line">              // 0, 0, 1, 0,  //(左-右 渐变)</span><br><span class="line">              // 0, 0, 0, 1,  //(上-下 渐变)</span><br><span class="line">              color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [</span><br><span class="line">                //四色渐变只能0 ~ 1之间</span><br><span class="line">                &#123; offset: 0, color: &#x27;#00a6ff&#x27; &#125;,</span><br><span class="line">                &#123;offset: 0.5, color: &#x27;#DDA0DD&#x27;&#125;,</span><br><span class="line">                &#123; offset: 0.8, color: &#x27;#DC143C&#x27; &#125;,</span><br><span class="line">                &#123; offset: 1, color: &#x27;#01f2bd&#x27; &#125;,</span><br><span class="line">              ])</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          value: 27,</span><br><span class="line">          name: &#x27;测试数据2&#x27;,</span><br><span class="line">          itemStyle: &#123; color: &#x27;#ec4a4a&#x27; &#125;</span><br><span class="line">        &#125;</span><br><span class="line">      ]</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    //中心圆配置</span><br><span class="line">    &#123;</span><br><span class="line">      type: &#x27;pie&#x27;,</span><br><span class="line">      radius: [0, &#x27;20%&#x27;],</span><br><span class="line">      //与外环的圆心保持一致</span><br><span class="line">      center: [&#x27;50%&#x27;, &#x27;43%&#x27;],</span><br><span class="line">      data: [</span><br><span class="line">        &#123;</span><br><span class="line">          name: &#x27;&#x27;,</span><br><span class="line">          value: 1,</span><br><span class="line">          //环颜色配置</span><br><span class="line">          itemStyle: &#123; color: &#x27;	#696969&#x27; &#125;,</span><br><span class="line">          tooltip: &#123;</span><br><span class="line">            show: false</span><br><span class="line">          &#125;,</span><br><span class="line">          //是否关闭高亮状态,中心圆关闭鼠标移动上去后的放大显示效果</span><br><span class="line">          emphasis: &#123;</span><br><span class="line">            disabled: true</span><br><span class="line">          &#125;,</span><br><span class="line">          select: &#123;</span><br><span class="line">            disabled: false</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">      ],</span><br><span class="line">      label: &#123;</span><br><span class="line">        show: false</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<p>(3)完整页面:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;zh-CN&quot;</span> <span class="attr">style</span>=<span class="string">&quot;height: 100%&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;utf-8&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span> <span class="attr">style</span>=<span class="string">&quot;height: 100%; margin: 0&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;container&quot;</span> <span class="attr">style</span>=<span class="string">&quot;height: 100%&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> <span class="attr">src</span>=<span class="string">&quot;https://fastly.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> dom = <span class="built_in">document</span>.getElementById(<span class="string">&#x27;container&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> myChart = echarts.init(dom, <span class="literal">null</span>, &#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">renderer</span>: <span class="string">&#x27;canvas&#x27;</span>,</span></span><br><span class="line"><span class="javascript">      <span class="attr">useDirtyRect</span>: <span class="literal">false</span></span></span><br><span class="line"><span class="javascript">    &#125;);</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> app = &#123;&#125;;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> option;</span></span><br><span class="line"><span class="javascript">    option = &#123;</span></span><br><span class="line"><span class="javascript">  <span class="attr">tooltip</span>: &#123;</span></span><br><span class="line"><span class="javascript">    <span class="attr">trigger</span>: <span class="string">&#x27;item&#x27;</span>,</span></span><br><span class="line"><span class="javascript">    <span class="attr">backgroundColor</span>: <span class="string">&#x27;rgba(255, 255, 255, 0.8)&#x27;</span></span></span><br><span class="line"><span class="javascript">  &#125;,</span></span><br><span class="line"><span class="javascript">  <span class="attr">title</span>: [</span></span><br><span class="line"><span class="javascript">    &#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">text</span>: <span class="string">&#x27;测试比例&#x27;</span>,</span></span><br><span class="line"><span class="javascript">      <span class="attr">left</span>: <span class="string">&#x27;center&#x27;</span>,</span></span><br><span class="line"><span class="javascript">      <span class="attr">top</span>: <span class="string">&#x27;45%&#x27;</span>,</span></span><br><span class="line"><span class="javascript">      <span class="attr">textStyle</span>: &#123; <span class="attr">color</span>: <span class="string">&#x27;#e7ebf0&#x27;</span>, <span class="attr">fontSize</span>: <span class="number">15</span> &#125;</span></span><br><span class="line"><span class="javascript">    &#125;,</span></span><br><span class="line"><span class="javascript">    &#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">text</span>: <span class="string">&#x27;90%&#x27;</span>,</span></span><br><span class="line"><span class="javascript">      <span class="attr">left</span>: <span class="string">&#x27;center&#x27;</span>,</span></span><br><span class="line"><span class="javascript">      <span class="attr">top</span>: <span class="string">&#x27;40%&#x27;</span>,</span></span><br><span class="line"><span class="javascript">      <span class="attr">textStyle</span>: &#123; <span class="attr">color</span>: <span class="string">&#x27;#3acae4&#x27;</span>, <span class="attr">fontSize</span>: <span class="number">31</span> &#125;</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">  ],</span></span><br><span class="line"><span class="javascript">  <span class="attr">legend</span>: &#123;</span></span><br><span class="line"><span class="javascript">    <span class="attr">left</span>: <span class="string">&#x27;center&#x27;</span>,</span></span><br><span class="line"><span class="javascript">    <span class="attr">bottom</span>: <span class="string">&#x27;33%&#x27;</span>,</span></span><br><span class="line"><span class="javascript">    <span class="comment">//控制legend的布局方向</span></span></span><br><span class="line"><span class="javascript">    <span class="attr">orient</span>: <span class="string">&#x27;vertical&#x27;</span>,</span></span><br><span class="line"><span class="javascript">    <span class="comment">//控制legend的布局大小</span></span></span><br><span class="line"><span class="javascript">    <span class="attr">itemWidth</span>: <span class="number">7</span>,</span></span><br><span class="line"><span class="javascript">    <span class="attr">itemHeight</span>: <span class="number">7</span>,</span></span><br><span class="line"><span class="javascript">    <span class="comment">//lengend数据显示配置,echarts 给formatter文字添加不同颜色</span></span></span><br><span class="line"><span class="javascript">    <span class="attr">formatter</span>: <span class="function"><span class="keyword">function</span> (<span class="params">value</span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">      <span class="keyword">if</span> (value.length &gt; <span class="number">5</span>) &#123;</span></span><br><span class="line"><span class="javascript">        <span class="keyword">return</span> value.substring(<span class="number">0</span>, <span class="number">4</span>) + <span class="string">&#x27;...&#x27;</span> + <span class="string">&#x27;&#123;a|&#x27;</span> + <span class="string">&#x27;|  20%&#x27;</span> + <span class="string">&#x27;&#125;&#x27;</span> + <span class="string">&#x27;20&#x27;</span>;</span></span><br><span class="line"><span class="javascript">      &#125; <span class="keyword">else</span> &#123;</span></span><br><span class="line"><span class="javascript">        <span class="keyword">return</span> value + <span class="string">&#x27;&#123;a|&#x27;</span> + <span class="string">&#x27;|  20%&#x27;</span> + <span class="string">&#x27;&#125;&#x27;</span> + <span class="string">&#x27;20&#x27;</span>;</span></span><br><span class="line"><span class="javascript">      &#125;</span></span><br><span class="line"><span class="javascript">    &#125;,</span></span><br><span class="line"><span class="javascript">    <span class="attr">textStyle</span>: &#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">fontSize</span>: <span class="number">15</span>,</span></span><br><span class="line"><span class="javascript">      <span class="comment">//在rich中给formatter添加个别字体颜色</span></span></span><br><span class="line"><span class="javascript">      <span class="attr">rich</span>: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">a</span>: &#123;</span></span><br><span class="line"><span class="javascript">          <span class="attr">color</span>: <span class="string">&#x27;#03a9f4&#x27;</span>,</span></span><br><span class="line"><span class="javascript">          <span class="attr">padding</span>: [<span class="number">0</span>, <span class="number">10</span>],</span></span><br><span class="line"><span class="javascript">          <span class="attr">fontSize</span>: <span class="number">15</span></span></span><br><span class="line"><span class="javascript">        &#125;</span></span><br><span class="line"><span class="javascript">      &#125;</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">  &#125;,</span></span><br><span class="line"><span class="javascript">  <span class="attr">cursor</span>: <span class="string">&#x27;pointer&#x27;</span>,</span></span><br><span class="line"><span class="javascript">  <span class="attr">series</span>: [</span></span><br><span class="line"><span class="javascript">    &#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">name</span>: <span class="string">&#x27;stnPie&#x27;</span>,</span></span><br><span class="line"><span class="javascript">      <span class="attr">type</span>: <span class="string">&#x27;pie&#x27;</span>,</span></span><br><span class="line"><span class="javascript">      <span class="attr">radius</span>: [<span class="string">&#x27;25%&#x27;</span>, <span class="string">&#x27;33%&#x27;</span>],</span></span><br><span class="line"><span class="javascript">      <span class="attr">center</span>: [<span class="string">&#x27;50%&#x27;</span>, <span class="string">&#x27;43%&#x27;</span>],</span></span><br><span class="line"><span class="javascript">      <span class="comment">//最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互。</span></span></span><br><span class="line"><span class="javascript">      <span class="attr">label</span>: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">show</span>: <span class="literal">false</span>,</span></span><br><span class="line"><span class="javascript">        <span class="attr">position</span>: <span class="string">&#x27;center&#x27;</span></span></span><br><span class="line"><span class="javascript">      &#125;,</span></span><br><span class="line"><span class="javascript">      <span class="attr">labelLine</span>: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">show</span>: <span class="literal">false</span></span></span><br><span class="line"><span class="javascript">      &#125;,</span></span><br><span class="line"><span class="javascript">      <span class="attr">itemStyle</span>: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">normal</span>: &#123;</span></span><br><span class="line"><span class="javascript">          <span class="attr">borderWidth</span>: <span class="number">2.5</span>, <span class="comment">// 间距的宽度</span></span></span><br><span class="line"><span class="javascript">          <span class="attr">borderColor</span>: <span class="string">&#x27;#ffffff&#x27;</span> <span class="comment">//背景色</span></span></span><br><span class="line"><span class="javascript">        &#125;</span></span><br><span class="line"><span class="javascript">      &#125;,</span></span><br><span class="line"><span class="javascript">      <span class="attr">data</span>: [</span></span><br><span class="line"><span class="javascript">        &#123;</span></span><br><span class="line"><span class="javascript">          <span class="attr">value</span>: <span class="number">300</span>,</span></span><br><span class="line"><span class="javascript">          <span class="attr">name</span>: <span class="string">&#x27;测试数据1&#x27;</span>,</span></span><br><span class="line"><span class="javascript">          <span class="comment">//配置样式</span></span></span><br><span class="line"><span class="javascript">          <span class="attr">itemStyle</span>: &#123;</span></span><br><span class="line"><span class="javascript">            <span class="attr">normal</span>: &#123;</span></span><br><span class="line"><span class="javascript">              <span class="comment">//颜色渐变</span></span></span><br><span class="line"><span class="javascript">              <span class="comment">// 1, 1, 1, 0,  //(下-上 渐变)</span></span></span><br><span class="line"><span class="javascript">              <span class="comment">// 1, 1, 0, 0,  //(左上-右下 渐变)</span></span></span><br><span class="line"><span class="javascript">              <span class="comment">// 1, 0, 0, 0,  //(左-右 渐变)</span></span></span><br><span class="line"><span class="javascript">              <span class="comment">// 0, 1, 1, 0,  //(右上-左下 渐变)</span></span></span><br><span class="line"><span class="javascript">              <span class="comment">// 0, 1, 1, 1,  //(左-右 渐变)</span></span></span><br><span class="line"><span class="javascript">              <span class="comment">// 1, 0, 1, 1,  //(上-下 渐变)</span></span></span><br><span class="line"><span class="javascript">              <span class="comment">// 0, 0, 1, 0,  //(左-右 渐变)</span></span></span><br><span class="line"><span class="javascript">              <span class="comment">// 0, 0, 0, 1,  //(上-下 渐变)</span></span></span><br><span class="line"><span class="javascript">              <span class="attr">color</span>: <span class="keyword">new</span> echarts.graphic.LinearGradient(<span class="number">0</span>, <span class="number">1</span>, <span class="number">1</span>, <span class="number">1</span>, [</span></span><br><span class="line"><span class="javascript">                <span class="comment">//四色渐变只能0 ~ 1之间</span></span></span><br><span class="line"><span class="javascript">                &#123; <span class="attr">offset</span>: <span class="number">0</span>, <span class="attr">color</span>: <span class="string">&#x27;#00a6ff&#x27;</span> &#125;,</span></span><br><span class="line"><span class="javascript">                &#123;<span class="attr">offset</span>: <span class="number">0.5</span>, <span class="attr">color</span>: <span class="string">&#x27;#DDA0DD&#x27;</span>&#125;,</span></span><br><span class="line"><span class="javascript">                &#123; <span class="attr">offset</span>: <span class="number">0.8</span>, <span class="attr">color</span>: <span class="string">&#x27;#DC143C&#x27;</span> &#125;,</span></span><br><span class="line"><span class="javascript">                &#123; <span class="attr">offset</span>: <span class="number">1</span>, <span class="attr">color</span>: <span class="string">&#x27;#01f2bd&#x27;</span> &#125;,</span></span><br><span class="line"><span class="javascript">              ])</span></span><br><span class="line"><span class="javascript">            &#125;</span></span><br><span class="line"><span class="javascript">          &#125;</span></span><br><span class="line"><span class="javascript">        &#125;,</span></span><br><span class="line"><span class="javascript">        &#123;</span></span><br><span class="line"><span class="javascript">          <span class="attr">value</span>: <span class="number">27</span>,</span></span><br><span class="line"><span class="javascript">          <span class="attr">name</span>: <span class="string">&#x27;测试数据2&#x27;</span>,</span></span><br><span class="line"><span class="javascript">          <span class="attr">itemStyle</span>: &#123; <span class="attr">color</span>: <span class="string">&#x27;#ec4a4a&#x27;</span> &#125;</span></span><br><span class="line"><span class="javascript">        &#125;</span></span><br><span class="line"><span class="javascript">      ]</span></span><br><span class="line"><span class="javascript">    &#125;,</span></span><br><span class="line"><span class="javascript">    <span class="comment">//中心圆配置</span></span></span><br><span class="line"><span class="javascript">    &#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">type</span>: <span class="string">&#x27;pie&#x27;</span>,</span></span><br><span class="line"><span class="javascript">      <span class="attr">radius</span>: [<span class="number">0</span>, <span class="string">&#x27;20%&#x27;</span>],</span></span><br><span class="line"><span class="javascript">      <span class="comment">//与外环的圆心保持一致</span></span></span><br><span class="line"><span class="javascript">      <span class="attr">center</span>: [<span class="string">&#x27;50%&#x27;</span>, <span class="string">&#x27;43%&#x27;</span>],</span></span><br><span class="line"><span class="javascript">      <span class="attr">data</span>: [</span></span><br><span class="line"><span class="javascript">        &#123;</span></span><br><span class="line"><span class="javascript">          <span class="attr">name</span>: <span class="string">&#x27;&#x27;</span>,</span></span><br><span class="line"><span class="javascript">          <span class="attr">value</span>: <span class="number">1</span>,</span></span><br><span class="line"><span class="javascript">          <span class="comment">//环颜色配置</span></span></span><br><span class="line"><span class="javascript">          <span class="attr">itemStyle</span>: &#123; <span class="attr">color</span>: <span class="string">&#x27;	#696969&#x27;</span> &#125;,</span></span><br><span class="line"><span class="javascript">          <span class="attr">tooltip</span>: &#123;</span></span><br><span class="line"><span class="javascript">            <span class="attr">show</span>: <span class="literal">false</span></span></span><br><span class="line"><span class="javascript">          &#125;,</span></span><br><span class="line"><span class="javascript">          <span class="comment">//是否关闭高亮状态,中心圆关闭鼠标移动上去后的放大显示效果</span></span></span><br><span class="line"><span class="javascript">          <span class="attr">emphasis</span>: &#123;</span></span><br><span class="line"><span class="javascript">            <span class="attr">disabled</span>: <span class="literal">true</span></span></span><br><span class="line"><span class="javascript">          &#125;,</span></span><br><span class="line"><span class="javascript">          <span class="attr">select</span>: &#123;</span></span><br><span class="line"><span class="javascript">            <span class="attr">disabled</span>: <span class="literal">false</span></span></span><br><span class="line"><span class="javascript">          &#125;</span></span><br><span class="line"><span class="javascript">        &#125;</span></span><br><span class="line"><span class="javascript">      ],</span></span><br><span class="line"><span class="javascript">      <span class="attr">label</span>: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">show</span>: <span class="literal">false</span></span></span><br><span class="line"><span class="javascript">      &#125;</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">  ]</span></span><br><span class="line"><span class="javascript">&#125;;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">if</span> (option &amp;&amp; <span class="keyword">typeof</span> option === <span class="string">&#x27;object&#x27;</span>) &#123;</span></span><br><span class="line"><span class="javascript">      myChart.setOption(option);</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">    <span class="built_in">window</span>.addEventListener(<span class="string">&#x27;resize&#x27;</span>, myChart.resize);</span></span><br><span class="line"><span class="javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h5 id="仪表盘："><a href="#仪表盘：" class="headerlink" title="仪表盘："></a>仪表盘：</h5><p>(1)练习图例:</p>
<p><img src="/2023/01/06/echarts/image-20230106152140467.png" alt="image-20230106152140467"></p>
<p>(2)配置项:</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">option = &#123;</span><br><span class="line">  series: [</span><br><span class="line">    &#123;</span><br><span class="line">      type: &#x27;gauge&#x27;,</span><br><span class="line">      //半径</span><br><span class="line">      radius: 200,</span><br><span class="line">      //控制弧长</span><br><span class="line">      startAngle: 180,</span><br><span class="line">      endAngle: 0,</span><br><span class="line">      min: 0,</span><br><span class="line">      //占比</span><br><span class="line">      max: 100,</span><br><span class="line">      splitNumber: 12,</span><br><span class="line">      itemStyle: &#123;</span><br><span class="line">        //环颜色</span><br><span class="line">        color: &#x27;#6495ED&#x27;,</span><br><span class="line">        shadowBlur: 10,</span><br><span class="line">        shadowOffsetX: 2,</span><br><span class="line">        shadowOffsetY: 2</span><br><span class="line">      &#125;,</span><br><span class="line">      progress: &#123;</span><br><span class="line">        //半圆环配置</span><br><span class="line">        show: true,</span><br><span class="line">        // roundCap: true,</span><br><span class="line">        width: 25</span><br><span class="line">      &#125;,</span><br><span class="line">      //底层圆环配置</span><br><span class="line">      axisLine: &#123;</span><br><span class="line">        // roundCap: true,</span><br><span class="line">        show: true,</span><br><span class="line">        // 属性lineStyle控制线条样式</span><br><span class="line">        lineStyle: &#123;</span><br><span class="line">          width: 25,</span><br><span class="line">          color: [[1, &#x27;#FF69B4&#x27;]]</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      //刻度样式</span><br><span class="line">      axisTick: &#123;</span><br><span class="line">        show: true,</span><br><span class="line">        splitNumber: 4,</span><br><span class="line">        length: 11,</span><br><span class="line">        //控制大小</span><br><span class="line">        distance: 40,</span><br><span class="line">        lineStyle: &#123;</span><br><span class="line">          width: 2,</span><br><span class="line">          color: &#x27;#C71585&#x27;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      //分隔线样式</span><br><span class="line">      splitLine: &#123;</span><br><span class="line">        show: false,</span><br><span class="line">        length: 12,</span><br><span class="line">        lineStyle: &#123;</span><br><span class="line">          width: 3,</span><br><span class="line">          color: &#x27;#185da5&#x27;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      //表盘刻度配置</span><br><span class="line">      axisLabel: &#123;</span><br><span class="line">        show: false,</span><br><span class="line">        distance: 30,</span><br><span class="line">        color: &#x27;#999&#x27;,</span><br><span class="line">        fontSize: 20</span><br><span class="line">      &#125;,</span><br><span class="line">      //指针配置</span><br><span class="line">      pointer: &#123;</span><br><span class="line">        show: true,</span><br><span class="line">        showAbove: false,</span><br><span class="line">        offsetCenter: [0, -125],</span><br><span class="line">        length: &#x27;34%&#x27;,</span><br><span class="line">        width: 1.2,</span><br><span class="line">        itemStyle: &#123;</span><br><span class="line">          color: &#x27;#1a73d0&#x27;,</span><br><span class="line">          borderCap: &#x27;butt&#x27;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      tooltip: &#123;</span><br><span class="line">        show: true</span><br><span class="line">      &#125;,</span><br><span class="line">      //标题配置相关</span><br><span class="line">      title: &#123;</span><br><span class="line">        show: true,</span><br><span class="line">        offsetCenter: [-5, -60]</span><br><span class="line">      &#125;,</span><br><span class="line">      detail: &#123;</span><br><span class="line">        // backgroundColor: &#x27;#45e9fe&#x27;,</span><br><span class="line">        // borderColor: &#x27;#45e9fe&#x27;,</span><br><span class="line">        // borderWidth: 2,</span><br><span class="line">        // fontStyle: &#x27;#45e9fe&#x27;,</span><br><span class="line">        width: &#x27;60%&#x27;,</span><br><span class="line">        lineHeight: 40,</span><br><span class="line">        height: 50,</span><br><span class="line">        // borderRadius: 8,</span><br><span class="line">        //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移</span><br><span class="line">        offsetCenter: [0, &#x27;2%&#x27;],</span><br><span class="line">        valueAnimation: true,</span><br><span class="line">        formatter: function (value) &#123;</span><br><span class="line">          return &#x27;&#123;value|&#x27; + value.toFixed(2) + &#x27;&#125;&#x27;;</span><br><span class="line">        &#125;,</span><br><span class="line">        rich: &#123;</span><br><span class="line">          value: &#123;</span><br><span class="line">            fontSize: 45,</span><br><span class="line">            fontWeight: &#x27;bolder&#x27;,</span><br><span class="line">            //中心数字</span><br><span class="line">            color: &#x27;#45e9fe&#x27;</span><br><span class="line">          &#125;</span><br><span class="line">          //中心数据单位配置</span><br><span class="line">          // unit: &#123;</span><br><span class="line">          //   fontSize: 20,</span><br><span class="line">          //   color: &#x27;#999&#x27;,</span><br><span class="line">          //   padding: [0, 0, -20, 10]</span><br><span class="line">          // &#125;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      data: [</span><br><span class="line">        &#123;</span><br><span class="line">          name: &#x27;你好&#x27;,</span><br><span class="line">          value: 66.66</span><br><span class="line">        &#125;</span><br><span class="line">      ]</span><br><span class="line">    &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>



<p>(3)完整页面:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;zh-CN&quot;</span> <span class="attr">style</span>=<span class="string">&quot;height: 100%&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;utf-8&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span> <span class="attr">style</span>=<span class="string">&quot;height: 100%; margin: 0&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;container&quot;</span> <span class="attr">style</span>=<span class="string">&quot;height: 100%&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> <span class="attr">src</span>=<span class="string">&quot;https://fastly.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> dom = <span class="built_in">document</span>.getElementById(<span class="string">&#x27;container&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> myChart = echarts.init(dom, <span class="literal">null</span>, &#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">renderer</span>: <span class="string">&#x27;canvas&#x27;</span>,</span></span><br><span class="line"><span class="javascript">      <span class="attr">useDirtyRect</span>: <span class="literal">false</span></span></span><br><span class="line"><span class="javascript">    &#125;);</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> app = &#123;&#125;;</span></span><br><span class="line"><span class="javascript">    </span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> option;</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">    option = &#123;</span></span><br><span class="line"><span class="javascript">  <span class="attr">series</span>: [</span></span><br><span class="line"><span class="javascript">    &#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">type</span>: <span class="string">&#x27;gauge&#x27;</span>,</span></span><br><span class="line"><span class="javascript">      <span class="comment">//半径</span></span></span><br><span class="line"><span class="javascript">      <span class="attr">radius</span>: <span class="number">200</span>,</span></span><br><span class="line"><span class="javascript">      <span class="comment">//控制弧长</span></span></span><br><span class="line"><span class="javascript">      <span class="attr">startAngle</span>: <span class="number">180</span>,</span></span><br><span class="line"><span class="javascript">      <span class="attr">endAngle</span>: <span class="number">0</span>,</span></span><br><span class="line"><span class="javascript">      <span class="attr">min</span>: <span class="number">0</span>,</span></span><br><span class="line"><span class="javascript">      <span class="comment">//占比</span></span></span><br><span class="line"><span class="javascript">      <span class="attr">max</span>: <span class="number">100</span>,</span></span><br><span class="line"><span class="javascript">      <span class="attr">splitNumber</span>: <span class="number">12</span>,</span></span><br><span class="line"><span class="javascript">      <span class="attr">itemStyle</span>: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="comment">//环颜色</span></span></span><br><span class="line"><span class="javascript">        <span class="attr">color</span>: <span class="string">&#x27;#6495ED&#x27;</span>,</span></span><br><span class="line"><span class="javascript">        <span class="attr">shadowBlur</span>: <span class="number">10</span>,</span></span><br><span class="line"><span class="javascript">        <span class="attr">shadowOffsetX</span>: <span class="number">2</span>,</span></span><br><span class="line"><span class="javascript">        <span class="attr">shadowOffsetY</span>: <span class="number">2</span></span></span><br><span class="line"><span class="javascript">      &#125;,</span></span><br><span class="line"><span class="javascript">      <span class="attr">progress</span>: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="comment">//半圆环配置</span></span></span><br><span class="line"><span class="javascript">        <span class="attr">show</span>: <span class="literal">true</span>,</span></span><br><span class="line"><span class="javascript">        <span class="comment">// roundCap: true,</span></span></span><br><span class="line"><span class="javascript">        <span class="attr">width</span>: <span class="number">25</span></span></span><br><span class="line"><span class="javascript">      &#125;,</span></span><br><span class="line"><span class="javascript">      <span class="comment">//底层圆环配置</span></span></span><br><span class="line"><span class="javascript">      <span class="attr">axisLine</span>: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="comment">// roundCap: true,</span></span></span><br><span class="line"><span class="javascript">        <span class="attr">show</span>: <span class="literal">true</span>,</span></span><br><span class="line"><span class="javascript">        <span class="comment">// 属性lineStyle控制线条样式</span></span></span><br><span class="line"><span class="javascript">        <span class="attr">lineStyle</span>: &#123;</span></span><br><span class="line"><span class="javascript">          <span class="attr">width</span>: <span class="number">25</span>,</span></span><br><span class="line"><span class="javascript">          <span class="attr">color</span>: [[<span class="number">1</span>, <span class="string">&#x27;#FF69B4&#x27;</span>]]</span></span><br><span class="line"><span class="javascript">        &#125;</span></span><br><span class="line"><span class="javascript">      &#125;,</span></span><br><span class="line"><span class="javascript">      <span class="comment">//刻度样式</span></span></span><br><span class="line"><span class="javascript">      <span class="attr">axisTick</span>: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">show</span>: <span class="literal">true</span>,</span></span><br><span class="line"><span class="javascript">        <span class="attr">splitNumber</span>: <span class="number">4</span>,</span></span><br><span class="line"><span class="javascript">        <span class="attr">length</span>: <span class="number">11</span>,</span></span><br><span class="line"><span class="javascript">        <span class="comment">//控制大小</span></span></span><br><span class="line"><span class="javascript">        <span class="attr">distance</span>: <span class="number">40</span>,</span></span><br><span class="line"><span class="javascript">        <span class="attr">lineStyle</span>: &#123;</span></span><br><span class="line"><span class="javascript">          <span class="attr">width</span>: <span class="number">2</span>,</span></span><br><span class="line"><span class="javascript">          <span class="attr">color</span>: <span class="string">&#x27;#C71585&#x27;</span></span></span><br><span class="line"><span class="javascript">        &#125;</span></span><br><span class="line"><span class="javascript">      &#125;,</span></span><br><span class="line"><span class="javascript">      <span class="comment">//分隔线样式</span></span></span><br><span class="line"><span class="javascript">      <span class="attr">splitLine</span>: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">show</span>: <span class="literal">false</span>,</span></span><br><span class="line"><span class="javascript">        <span class="attr">length</span>: <span class="number">12</span>,</span></span><br><span class="line"><span class="javascript">        <span class="attr">lineStyle</span>: &#123;</span></span><br><span class="line"><span class="javascript">          <span class="attr">width</span>: <span class="number">3</span>,</span></span><br><span class="line"><span class="javascript">          <span class="attr">color</span>: <span class="string">&#x27;#185da5&#x27;</span></span></span><br><span class="line"><span class="javascript">        &#125;</span></span><br><span class="line"><span class="javascript">      &#125;,</span></span><br><span class="line"><span class="javascript">      <span class="comment">//表盘刻度配置</span></span></span><br><span class="line"><span class="javascript">      <span class="attr">axisLabel</span>: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">show</span>: <span class="literal">false</span>,</span></span><br><span class="line"><span class="javascript">        <span class="attr">distance</span>: <span class="number">30</span>,</span></span><br><span class="line"><span class="javascript">        <span class="attr">color</span>: <span class="string">&#x27;#999&#x27;</span>,</span></span><br><span class="line"><span class="javascript">        <span class="attr">fontSize</span>: <span class="number">20</span></span></span><br><span class="line"><span class="javascript">      &#125;,</span></span><br><span class="line"><span class="javascript">      <span class="comment">//指针配置</span></span></span><br><span class="line"><span class="javascript">      <span class="attr">pointer</span>: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">show</span>: <span class="literal">true</span>,</span></span><br><span class="line"><span class="javascript">        <span class="attr">showAbove</span>: <span class="literal">false</span>,</span></span><br><span class="line"><span class="javascript">        <span class="attr">offsetCenter</span>: [<span class="number">0</span>, -<span class="number">125</span>],</span></span><br><span class="line"><span class="javascript">        <span class="attr">length</span>: <span class="string">&#x27;34%&#x27;</span>,</span></span><br><span class="line"><span class="javascript">        <span class="attr">width</span>: <span class="number">1.2</span>,</span></span><br><span class="line"><span class="javascript">        <span class="attr">itemStyle</span>: &#123;</span></span><br><span class="line"><span class="javascript">          <span class="attr">color</span>: <span class="string">&#x27;#1a73d0&#x27;</span>,</span></span><br><span class="line"><span class="javascript">          <span class="attr">borderCap</span>: <span class="string">&#x27;butt&#x27;</span></span></span><br><span class="line"><span class="javascript">        &#125;</span></span><br><span class="line"><span class="javascript">      &#125;,</span></span><br><span class="line"><span class="javascript">      <span class="attr">tooltip</span>: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">show</span>: <span class="literal">true</span></span></span><br><span class="line"><span class="javascript">      &#125;,</span></span><br><span class="line"><span class="javascript">      <span class="comment">//标题配置相关</span></span></span><br><span class="line"><span class="javascript">      <span class="attr">title</span>: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">show</span>: <span class="literal">true</span>,</span></span><br><span class="line"><span class="javascript">        <span class="attr">offsetCenter</span>: [-<span class="number">5</span>, -<span class="number">60</span>]</span></span><br><span class="line"><span class="javascript">      &#125;,</span></span><br><span class="line"><span class="javascript">      <span class="attr">detail</span>: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="comment">// backgroundColor: &#x27;#45e9fe&#x27;,</span></span></span><br><span class="line"><span class="javascript">        <span class="comment">// borderColor: &#x27;#45e9fe&#x27;,</span></span></span><br><span class="line"><span class="javascript">        <span class="comment">// borderWidth: 2,</span></span></span><br><span class="line"><span class="javascript">        <span class="comment">// fontStyle: &#x27;#45e9fe&#x27;,</span></span></span><br><span class="line"><span class="javascript">        <span class="attr">width</span>: <span class="string">&#x27;60%&#x27;</span>,</span></span><br><span class="line"><span class="javascript">        <span class="attr">lineHeight</span>: <span class="number">40</span>,</span></span><br><span class="line"><span class="javascript">        <span class="attr">height</span>: <span class="number">50</span>,</span></span><br><span class="line"><span class="javascript">        <span class="comment">// borderRadius: 8,</span></span></span><br><span class="line"><span class="javascript">        <span class="comment">//相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移</span></span></span><br><span class="line"><span class="javascript">        <span class="attr">offsetCenter</span>: [<span class="number">0</span>, <span class="string">&#x27;2%&#x27;</span>],</span></span><br><span class="line"><span class="javascript">        <span class="attr">valueAnimation</span>: <span class="literal">true</span>,</span></span><br><span class="line"><span class="javascript">        <span class="attr">formatter</span>: <span class="function"><span class="keyword">function</span> (<span class="params">value</span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">          <span class="keyword">return</span> <span class="string">&#x27;&#123;value|&#x27;</span> + value.toFixed(<span class="number">2</span>) + <span class="string">&#x27;&#125;&#x27;</span>;</span></span><br><span class="line"><span class="javascript">        &#125;,</span></span><br><span class="line"><span class="javascript">        <span class="attr">rich</span>: &#123;</span></span><br><span class="line"><span class="javascript">          <span class="attr">value</span>: &#123;</span></span><br><span class="line"><span class="javascript">            <span class="attr">fontSize</span>: <span class="number">45</span>,</span></span><br><span class="line"><span class="javascript">            <span class="attr">fontWeight</span>: <span class="string">&#x27;bolder&#x27;</span>,</span></span><br><span class="line"><span class="javascript">            <span class="comment">//中心数字</span></span></span><br><span class="line"><span class="javascript">            <span class="attr">color</span>: <span class="string">&#x27;#45e9fe&#x27;</span></span></span><br><span class="line"><span class="javascript">          &#125;</span></span><br><span class="line"><span class="javascript">          <span class="comment">//中心数据单位配置</span></span></span><br><span class="line"><span class="javascript">          <span class="comment">// unit: &#123;</span></span></span><br><span class="line"><span class="javascript">          <span class="comment">//   fontSize: 20,</span></span></span><br><span class="line"><span class="javascript">          <span class="comment">//   color: &#x27;#999&#x27;,</span></span></span><br><span class="line"><span class="javascript">          <span class="comment">//   padding: [0, 0, -20, 10]</span></span></span><br><span class="line"><span class="javascript">          <span class="comment">// &#125;</span></span></span><br><span class="line"><span class="javascript">        &#125;</span></span><br><span class="line"><span class="javascript">      &#125;,</span></span><br><span class="line"><span class="javascript">      <span class="attr">data</span>: [</span></span><br><span class="line"><span class="javascript">        &#123;</span></span><br><span class="line"><span class="javascript">          <span class="attr">name</span>: <span class="string">&#x27;你好&#x27;</span>,</span></span><br><span class="line"><span class="javascript">          <span class="attr">value</span>: <span class="number">66.66</span></span></span><br><span class="line"><span class="javascript">        &#125;</span></span><br><span class="line"><span class="javascript">      ]</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">  ]</span></span><br><span class="line"><span class="javascript">&#125;;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">if</span> (option &amp;&amp; <span class="keyword">typeof</span> option === <span class="string">&#x27;object&#x27;</span>) &#123;</span></span><br><span class="line"><span class="javascript">      myChart.setOption(option);</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">    <span class="built_in">window</span>.addEventListener(<span class="string">&#x27;resize&#x27;</span>, myChart.resize);</span></span><br><span class="line"><span class="javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h5 id="曲线图："><a href="#曲线图：" class="headerlink" title="曲线图："></a>曲线图：</h5><p>(1)练习图例:</p>
<p><img src="/2023/01/06/echarts/image-20230110161051701.png" alt="image-20230110161051701"></p>
<p>特点: 竖直方向的颜色渐变、原点自定义信息（位置自定义）、legend样式自定义(非默认)、tooltip样式自定义(非默认)  ……</p>
<p>(2)配置项:</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">let seriesList = [];</span><br><span class="line">let fakedata = &#123;</span><br><span class="line">  xdata: [</span><br><span class="line">    &#x27;2020-03-01&#x27;,</span><br><span class="line">    &#x27;2020-03-02&#x27;,</span><br><span class="line">    &#x27;2020-03-03&#x27;,</span><br><span class="line">    &#x27;2020-03-04&#x27;,</span><br><span class="line">    &#x27;2020-03-05&#x27;,</span><br><span class="line">    &#x27;2020-03-06&#x27;</span><br><span class="line">  ],</span><br><span class="line">  seriesData: [</span><br><span class="line">    &#123; name: &#x27;组合1&#x27;, data: [20, 30, 21, 22, 50, 32, 30] &#125;,</span><br><span class="line">    &#123; name: &#x27;组合2&#x27;, data: [15, 34, 44, 40, 36, 35, 29] &#125;,</span><br><span class="line">    &#123; name: &#x27;组合3&#x27;, data: [30, 52, 41, 48, 37, 40, 45] &#125;,</span><br><span class="line">    &#123; name: &#x27;组合4&#x27;, data: [36, 37, 30, 24, 28, 39, 38] &#125;,</span><br><span class="line">    &#123; name: &#x27;组合5&#x27;, data: [46, 42, 37, 46, 41, 40, 35] &#125;,</span><br><span class="line">  ]</span><br><span class="line">&#125;;</span><br><span class="line">let colors = [&#x27;#F08080&#x27;, &#x27;#DC143C&#x27;, &#x27;#00BFFF&#x27;, &#x27;#008000&#x27;, &#x27;#4B0082&#x27;];</span><br><span class="line">let i = 0;</span><br><span class="line">if (JSON.stringify(fakedata) != &#x27;&#123;&#125;&#x27;) &#123;</span><br><span class="line">fakedata.seriesData.forEach((item) =&gt; &#123;</span><br><span class="line">  let color = colors[i % colors.length];</span><br><span class="line">  let obj = &#123;</span><br><span class="line">    name: item.name,</span><br><span class="line">    data: item.data,</span><br><span class="line">    type: &#x27;line&#x27;,</span><br><span class="line">    smooth: true,</span><br><span class="line">    symbol: &#x27;circle&#x27;, //将小圆点改成实心 不写symbol默认空心,</span><br><span class="line">    symbolSize: 6, //设定实心点的大小</span><br><span class="line">    showSymbol: true,</span><br><span class="line">    itemStyle: &#123;</span><br><span class="line">      color: color</span><br><span class="line">    &#125;,</span><br><span class="line">    emphasis: &#123;</span><br><span class="line">      itemStyle: &#123;</span><br><span class="line">        //下面是拐点样式配置属性</span><br><span class="line">        color: color, //这里设置的拐点颜色</span><br><span class="line">        borderColor: color, //  拐点边框颜色</span><br><span class="line">        borderWidth: 3.5, //  拐点边框宽度</span><br><span class="line">        shadowColor: color, //  阴影颜色</span><br><span class="line">        shadowBlur: 14 //  阴影渐变范围控制</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    areaStyle: &#123;</span><br><span class="line">      normal: &#123;</span><br><span class="line">        color: new echarts.graphic.LinearGradient(</span><br><span class="line">          0,</span><br><span class="line">          0,</span><br><span class="line">          0,</span><br><span class="line">          1,</span><br><span class="line">          [</span><br><span class="line">            &#123;</span><br><span class="line">              offset: 0,</span><br><span class="line">              color: color</span><br><span class="line">            &#125;,</span><br><span class="line">            &#123;</span><br><span class="line">              offset: 1,</span><br><span class="line">              color: &#x27;#FFDEAD&#x27;</span><br><span class="line">            &#125;</span><br><span class="line">          ],</span><br><span class="line">          false</span><br><span class="line">        )</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;;</span><br><span class="line">  seriesList.push(obj);</span><br><span class="line">  // lengedList.push(item.name);</span><br><span class="line">  i++;</span><br><span class="line">&#125;);</span><br><span class="line">&#125;</span><br><span class="line">var option;</span><br><span class="line">option = &#123;</span><br><span class="line">  grid: &#123;</span><br><span class="line">    // 让图表占满容器</span><br><span class="line">    top: &#x27;20px&#x27;,</span><br><span class="line">    left: &#x27;58px&#x27;,</span><br><span class="line">    right: &#x27;58px&#x27;,</span><br><span class="line">    bottom: &#x27;58px&#x27;</span><br><span class="line">  &#125;,</span><br><span class="line"></span><br><span class="line">  legend: &#123;</span><br><span class="line">    show: true,</span><br><span class="line">    bottom: 5,</span><br><span class="line">    icon: &#x27;circle&#x27;,</span><br><span class="line">    itemWidth: 10, // 设置宽度</span><br><span class="line">    itemHeight: 10, // 设置高度</span><br><span class="line">    formatter: function (name) &#123;</span><br><span class="line">      return &#x27;&#123;a|&#x27; + name + &#x27;&#125;&#x27;;</span><br><span class="line">    &#125;,</span><br><span class="line">    textStyle: &#123;</span><br><span class="line">      rich: &#123;</span><br><span class="line">        a: &#123;</span><br><span class="line">          align: &#x27;left&#x27;,</span><br><span class="line">          color: &#x27;#BFCBDA &#x27;,</span><br><span class="line">          padding: [0, 5, 0, 5]</span><br><span class="line">        &#125;,</span><br><span class="line">        b: &#123;</span><br><span class="line">          color: &#x27;#FFFFFF&#x27;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  tooltip: &#123;</span><br><span class="line">    show: true,</span><br><span class="line">    trigger: &#x27;item&#x27;, //值为axis显示该列下所有坐标轴对应数据，值为item时只显示该点数据</span><br><span class="line">    extraCssText:</span><br><span class="line">      &#x27;width:90px;height:35px;text-align: center;border-radius: 25px ;background-image: linear-gradient(to right, #01ffb2 , #57c4fe);&#x27;,</span><br><span class="line">    formatter: &#x27;&#123;c0&#125;&#x27;,</span><br><span class="line">    position: &#x27;top&#x27;,</span><br><span class="line">    backgroundColor: &#x27;#2ce0d8&#x27;,</span><br><span class="line">    borderColor: &#x27;#2ce0d8&#x27;</span><br><span class="line">  &#125;,</span><br><span class="line">  xAxis: &#123;</span><br><span class="line">    type: &#x27;category&#x27;,</span><br><span class="line">    data: fakedata.xdata,</span><br><span class="line">    // boundaryGap: false,</span><br><span class="line">    axisLine: &#123;</span><br><span class="line">      //控制X轴线的颜色</span><br><span class="line">      lineStyle: &#123;</span><br><span class="line">        color: &#x27;#0373a2&#x27;,</span><br><span class="line">        width: 1 //这里是为了突出显示加上的</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    axisLabel: &#123;</span><br><span class="line">      show: true,</span><br><span class="line">      textStyle: &#123;</span><br><span class="line">        color: &#x27;#99afca&#x27; //更改坐标轴文字颜色</span><br><span class="line">        // fontSize: 14, //更改坐标轴文字大小</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    splitLine: &#123;</span><br><span class="line">      //网格线</span><br><span class="line">      lineStyle: &#123;</span><br><span class="line">        type: &#x27;dashed&#x27;, //设置网格线类型 dotted：虚线   solid:实线</span><br><span class="line">        width: 1,</span><br><span class="line">        color: &#x27;#00415f&#x27;</span><br><span class="line">      &#125;,</span><br><span class="line">      show: false //隐藏或显示</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  yAxis: &#123;</span><br><span class="line">    type: &#x27;value&#x27;,</span><br><span class="line">    // 分隔线</span><br><span class="line">    splitLine: &#123;</span><br><span class="line">      //控制横坐标往上的横线颜色</span><br><span class="line">      show: true,</span><br><span class="line">      lineStyle: &#123;</span><br><span class="line">        color: [&#x27;#0373A2&#x27;],</span><br><span class="line">        width: 1,</span><br><span class="line">        type: &#x27;solid&#x27;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    // 坐标轴轴线</span><br><span class="line">    axisLine: &#123;</span><br><span class="line">      show: true,</span><br><span class="line">      //控制y轴线的颜色</span><br><span class="line">      lineStyle: &#123;</span><br><span class="line">        color: &#x27;#0373a2&#x27;,</span><br><span class="line">        width: 1 //这里是为了突出显示加上的</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    // 坐标轴刻度</span><br><span class="line">    axisTick: &#123;</span><br><span class="line">      show: true</span><br><span class="line">    &#125;,</span><br><span class="line">    // 刻度标签</span><br><span class="line">    axisLabel: &#123;</span><br><span class="line">      show: true,</span><br><span class="line">      textStyle: &#123;</span><br><span class="line">        color: &#x27;#e5ebf2&#x27; //更改坐标轴文字颜色</span><br><span class="line">        // fontSize: 14, //更改坐标轴文字大小</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    name: &#x27;标识&#x27;,</span><br><span class="line">    nameLocation: &#x27;start&#x27;, //将name配置在原点处下方</span><br><span class="line">    nameTextStyle: &#123;</span><br><span class="line">      //控制name的字体颜色以及对齐方式</span><br><span class="line">      color: &#x27;#8199b5&#x27;,</span><br><span class="line">      align: &#x27;right&#x27;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  series: seriesList</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>



<p>(3)完整页面:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;zh-CN&quot;</span> <span class="attr">style</span>=<span class="string">&quot;height: 100%&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;utf-8&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span> <span class="attr">style</span>=<span class="string">&quot;height: 100%; margin: 0&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;container&quot;</span> <span class="attr">style</span>=<span class="string">&quot;height: 100%&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> <span class="attr">src</span>=<span class="string">&quot;https://fastly.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> dom = <span class="built_in">document</span>.getElementById(<span class="string">&#x27;container&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> myChart = echarts.init(dom, <span class="string">&#x27;dark&#x27;</span>, &#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">renderer</span>: <span class="string">&#x27;canvas&#x27;</span>,</span></span><br><span class="line"><span class="javascript">      <span class="attr">useDirtyRect</span>: <span class="literal">false</span></span></span><br><span class="line"><span class="javascript">    &#125;);</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> app = &#123;&#125;;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> option;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">let</span> seriesList = [];</span></span><br><span class="line"><span class="javascript"><span class="keyword">let</span> fakedata = &#123;</span></span><br><span class="line"><span class="javascript">  <span class="attr">xdata</span>: [</span></span><br><span class="line"><span class="javascript">    <span class="string">&#x27;2020-03-01&#x27;</span>,</span></span><br><span class="line"><span class="javascript">    <span class="string">&#x27;2020-03-02&#x27;</span>,</span></span><br><span class="line"><span class="javascript">    <span class="string">&#x27;2020-03-03&#x27;</span>,</span></span><br><span class="line"><span class="javascript">    <span class="string">&#x27;2020-03-04&#x27;</span>,</span></span><br><span class="line"><span class="javascript">    <span class="string">&#x27;2020-03-05&#x27;</span>,</span></span><br><span class="line"><span class="javascript">    <span class="string">&#x27;2020-03-06&#x27;</span></span></span><br><span class="line"><span class="javascript">  ],</span></span><br><span class="line"><span class="javascript">  <span class="attr">seriesData</span>: [</span></span><br><span class="line"><span class="javascript">    &#123; <span class="attr">name</span>: <span class="string">&#x27;组合1&#x27;</span>, <span class="attr">data</span>: [<span class="number">20</span>, <span class="number">30</span>, <span class="number">21</span>, <span class="number">22</span>, <span class="number">50</span>, <span class="number">32</span>, <span class="number">30</span>] &#125;,</span></span><br><span class="line"><span class="javascript">    &#123; <span class="attr">name</span>: <span class="string">&#x27;组合2&#x27;</span>, <span class="attr">data</span>: [<span class="number">15</span>, <span class="number">34</span>, <span class="number">44</span>, <span class="number">40</span>, <span class="number">36</span>, <span class="number">35</span>, <span class="number">29</span>] &#125;,</span></span><br><span class="line"><span class="javascript">    &#123; <span class="attr">name</span>: <span class="string">&#x27;组合3&#x27;</span>, <span class="attr">data</span>: [<span class="number">30</span>, <span class="number">52</span>, <span class="number">41</span>, <span class="number">48</span>, <span class="number">37</span>, <span class="number">40</span>, <span class="number">45</span>] &#125;,</span></span><br><span class="line"><span class="javascript">    &#123; <span class="attr">name</span>: <span class="string">&#x27;组合4&#x27;</span>, <span class="attr">data</span>: [<span class="number">36</span>, <span class="number">37</span>, <span class="number">30</span>, <span class="number">24</span>, <span class="number">28</span>, <span class="number">39</span>, <span class="number">38</span>] &#125;,</span></span><br><span class="line"><span class="javascript">    &#123; <span class="attr">name</span>: <span class="string">&#x27;组合5&#x27;</span>, <span class="attr">data</span>: [<span class="number">46</span>, <span class="number">42</span>, <span class="number">37</span>, <span class="number">46</span>, <span class="number">41</span>, <span class="number">40</span>, <span class="number">35</span>] &#125;,</span></span><br><span class="line"><span class="javascript">  ]</span></span><br><span class="line"><span class="javascript">&#125;;</span></span><br><span class="line"><span class="javascript"><span class="keyword">let</span> colors = [<span class="string">&#x27;#F08080&#x27;</span>, <span class="string">&#x27;#DC143C&#x27;</span>, <span class="string">&#x27;#00BFFF&#x27;</span>, <span class="string">&#x27;#008000&#x27;</span>, <span class="string">&#x27;#4B0082&#x27;</span>];</span></span><br><span class="line"><span class="javascript"><span class="keyword">let</span> i = <span class="number">0</span>;</span></span><br><span class="line"><span class="javascript"><span class="keyword">if</span> (<span class="built_in">JSON</span>.stringify(fakedata) != <span class="string">&#x27;&#123;&#125;&#x27;</span>) &#123;</span></span><br><span class="line"><span class="javascript">fakedata.seriesData.forEach(<span class="function">(<span class="params">item</span>) =&gt;</span> &#123;</span></span><br><span class="line"><span class="javascript">  <span class="keyword">let</span> color = colors[i % colors.length];</span></span><br><span class="line"><span class="javascript">  <span class="keyword">let</span> obj = &#123;</span></span><br><span class="line"><span class="javascript">    <span class="attr">name</span>: item.name,</span></span><br><span class="line"><span class="javascript">    <span class="attr">data</span>: item.data,</span></span><br><span class="line"><span class="javascript">    <span class="attr">type</span>: <span class="string">&#x27;line&#x27;</span>,</span></span><br><span class="line"><span class="javascript">    <span class="attr">smooth</span>: <span class="literal">true</span>,</span></span><br><span class="line"><span class="javascript">    <span class="attr">symbol</span>: <span class="string">&#x27;circle&#x27;</span>, <span class="comment">//将小圆点改成实心 不写symbol默认空心,</span></span></span><br><span class="line"><span class="javascript">    <span class="attr">symbolSize</span>: <span class="number">6</span>, <span class="comment">//设定实心点的大小</span></span></span><br><span class="line"><span class="javascript">    <span class="attr">showSymbol</span>: <span class="literal">true</span>,</span></span><br><span class="line"><span class="javascript">    <span class="attr">itemStyle</span>: &#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">color</span>: color</span></span><br><span class="line"><span class="javascript">    &#125;,</span></span><br><span class="line"><span class="javascript">    <span class="attr">emphasis</span>: &#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">itemStyle</span>: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="comment">//下面是拐点样式配置属性</span></span></span><br><span class="line"><span class="javascript">        <span class="attr">color</span>: color, <span class="comment">//这里设置的拐点颜色</span></span></span><br><span class="line"><span class="javascript">        <span class="attr">borderColor</span>: color, <span class="comment">//  拐点边框颜色</span></span></span><br><span class="line"><span class="javascript">        <span class="attr">borderWidth</span>: <span class="number">3.5</span>, <span class="comment">//  拐点边框宽度</span></span></span><br><span class="line"><span class="javascript">        <span class="attr">shadowColor</span>: color, <span class="comment">//  阴影颜色</span></span></span><br><span class="line"><span class="javascript">        <span class="attr">shadowBlur</span>: <span class="number">14</span> <span class="comment">//  阴影渐变范围控制</span></span></span><br><span class="line"><span class="javascript">      &#125;</span></span><br><span class="line"><span class="javascript">    &#125;,</span></span><br><span class="line"><span class="javascript">    <span class="attr">areaStyle</span>: &#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">normal</span>: &#123;</span></span><br><span class="line"><span class="javascript">          <span class="comment">//配置竖直方向颜色渐变</span></span></span><br><span class="line"><span class="javascript">        <span class="attr">color</span>: <span class="keyword">new</span> echarts.graphic.LinearGradient(</span></span><br><span class="line"><span class="javascript">          <span class="number">0</span>,</span></span><br><span class="line"><span class="javascript">          <span class="number">0</span>,</span></span><br><span class="line"><span class="javascript">          <span class="number">0</span>,</span></span><br><span class="line"><span class="javascript">          <span class="number">1</span>,</span></span><br><span class="line"><span class="javascript">          [</span></span><br><span class="line"><span class="javascript">            &#123;</span></span><br><span class="line"><span class="javascript">              <span class="attr">offset</span>: <span class="number">0</span>,</span></span><br><span class="line"><span class="javascript">              <span class="attr">color</span>: color</span></span><br><span class="line"><span class="javascript">            &#125;,</span></span><br><span class="line"><span class="javascript">            &#123;</span></span><br><span class="line"><span class="javascript">              <span class="attr">offset</span>: <span class="number">1</span>,</span></span><br><span class="line"><span class="javascript">              <span class="attr">color</span>: <span class="string">&#x27;#FFDEAD&#x27;</span></span></span><br><span class="line"><span class="javascript">            &#125;</span></span><br><span class="line"><span class="javascript">          ],</span></span><br><span class="line"><span class="javascript">          <span class="literal">false</span></span></span><br><span class="line"><span class="javascript">        )</span></span><br><span class="line"><span class="javascript">      &#125;</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">  &#125;;</span></span><br><span class="line"><span class="javascript">  seriesList.push(obj);</span></span><br><span class="line"><span class="javascript">  i++;</span></span><br><span class="line"><span class="javascript">&#125;);</span></span><br><span class="line"><span class="javascript">&#125;</span></span><br><span class="line"><span class="javascript"><span class="keyword">var</span> option;</span></span><br><span class="line"><span class="javascript">option = &#123;</span></span><br><span class="line"><span class="javascript">  <span class="attr">grid</span>: &#123;</span></span><br><span class="line"><span class="javascript">    <span class="comment">// 让图表占满容器</span></span></span><br><span class="line"><span class="javascript">    <span class="attr">top</span>: <span class="string">&#x27;20px&#x27;</span>,</span></span><br><span class="line"><span class="javascript">    <span class="attr">left</span>: <span class="string">&#x27;58px&#x27;</span>,</span></span><br><span class="line"><span class="javascript">    <span class="attr">right</span>: <span class="string">&#x27;58px&#x27;</span>,</span></span><br><span class="line"><span class="javascript">    <span class="attr">bottom</span>: <span class="string">&#x27;58px&#x27;</span></span></span><br><span class="line"><span class="javascript">  &#125;,</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">  <span class="attr">legend</span>: &#123;</span></span><br><span class="line"><span class="javascript">    <span class="attr">show</span>: <span class="literal">true</span>,</span></span><br><span class="line"><span class="javascript">    <span class="attr">bottom</span>: <span class="number">5</span>,</span></span><br><span class="line"><span class="javascript">    <span class="attr">icon</span>: <span class="string">&#x27;circle&#x27;</span>,</span></span><br><span class="line"><span class="javascript">    <span class="attr">itemWidth</span>: <span class="number">10</span>, <span class="comment">// 设置宽度</span></span></span><br><span class="line"><span class="javascript">    <span class="attr">itemHeight</span>: <span class="number">10</span>, <span class="comment">// 设置高度</span></span></span><br><span class="line"><span class="javascript">    <span class="attr">formatter</span>: <span class="function"><span class="keyword">function</span> (<span class="params">name</span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">      <span class="keyword">return</span> <span class="string">&#x27;&#123;a|&#x27;</span> + name + <span class="string">&#x27;&#125;&#x27;</span>;</span></span><br><span class="line"><span class="javascript">    &#125;,</span></span><br><span class="line"><span class="javascript">    <span class="attr">textStyle</span>: &#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">rich</span>: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">a</span>: &#123;</span></span><br><span class="line"><span class="javascript">          <span class="attr">align</span>: <span class="string">&#x27;left&#x27;</span>,</span></span><br><span class="line"><span class="javascript">          <span class="attr">color</span>: <span class="string">&#x27;#BFCBDA &#x27;</span>,</span></span><br><span class="line"><span class="javascript">          <span class="attr">padding</span>: [<span class="number">0</span>, <span class="number">5</span>, <span class="number">0</span>, <span class="number">5</span>]</span></span><br><span class="line"><span class="javascript">        &#125;,</span></span><br><span class="line"><span class="javascript">        <span class="attr">b</span>: &#123;</span></span><br><span class="line"><span class="javascript">          <span class="attr">color</span>: <span class="string">&#x27;#FFFFFF&#x27;</span></span></span><br><span class="line"><span class="javascript">        &#125;</span></span><br><span class="line"><span class="javascript">      &#125;</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">  &#125;,</span></span><br><span class="line"><span class="javascript">  <span class="attr">tooltip</span>: &#123;</span></span><br><span class="line"><span class="javascript">    <span class="attr">show</span>: <span class="literal">true</span>,</span></span><br><span class="line"><span class="javascript">    <span class="attr">trigger</span>: <span class="string">&#x27;item&#x27;</span>, <span class="comment">//值为axis显示该列下所有坐标轴对应数据，值为item时只显示该点数据</span></span></span><br><span class="line"><span class="javascript">    <span class="comment">//tooltip的样式自定义</span></span></span><br><span class="line"><span class="javascript">    <span class="attr">extraCssText</span>:</span></span><br><span class="line"><span class="javascript">      <span class="string">&#x27;width:90px;height:35px;text-align: center;border-radius: 25px ;background-image: linear-gradient(to right, #01ffb2 , #57c4fe);&#x27;</span>,</span></span><br><span class="line"><span class="javascript">    <span class="attr">formatter</span>: <span class="string">&#x27;&#123;c0&#125;&#x27;</span>,</span></span><br><span class="line"><span class="javascript">    <span class="comment">//echarts的tooltip position设置为top，默认在底部会有一个倒三角</span></span></span><br><span class="line"><span class="javascript">    <span class="attr">position</span>: <span class="string">&#x27;top&#x27;</span>,</span></span><br><span class="line"><span class="javascript">    <span class="comment">//让倒三角和颜色和圆角矩形颜色一样</span></span></span><br><span class="line"><span class="javascript">    <span class="attr">backgroundColor</span>: <span class="string">&#x27;#2ce0d8&#x27;</span>,</span></span><br><span class="line"><span class="javascript">    <span class="attr">borderColor</span>: <span class="string">&#x27;#2ce0d8&#x27;</span></span></span><br><span class="line"><span class="javascript">  &#125;,</span></span><br><span class="line"><span class="javascript">  <span class="attr">xAxis</span>: &#123;</span></span><br><span class="line"><span class="javascript">    <span class="attr">type</span>: <span class="string">&#x27;category&#x27;</span>,</span></span><br><span class="line"><span class="javascript">    <span class="attr">data</span>: fakedata.xdata,</span></span><br><span class="line"><span class="javascript">    <span class="comment">// boundaryGap: false,</span></span></span><br><span class="line"><span class="javascript">    <span class="attr">axisLine</span>: &#123;</span></span><br><span class="line"><span class="javascript">      <span class="comment">//控制X轴线的颜色</span></span></span><br><span class="line"><span class="javascript">      <span class="attr">lineStyle</span>: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">color</span>: <span class="string">&#x27;#0373a2&#x27;</span>,</span></span><br><span class="line"><span class="javascript">        <span class="attr">width</span>: <span class="number">1</span> <span class="comment">//这里是为了突出显示加上的</span></span></span><br><span class="line"><span class="javascript">      &#125;</span></span><br><span class="line"><span class="javascript">    &#125;,</span></span><br><span class="line"><span class="javascript">    <span class="attr">axisLabel</span>: &#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">show</span>: <span class="literal">true</span>,</span></span><br><span class="line"><span class="javascript">      <span class="attr">textStyle</span>: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">color</span>: <span class="string">&#x27;#99afca&#x27;</span> <span class="comment">//更改坐标轴文字颜色</span></span></span><br><span class="line"><span class="javascript">        <span class="comment">// fontSize: 14, //更改坐标轴文字大小</span></span></span><br><span class="line"><span class="javascript">      &#125;</span></span><br><span class="line"><span class="javascript">    &#125;,</span></span><br><span class="line"><span class="javascript">    <span class="attr">splitLine</span>: &#123;</span></span><br><span class="line"><span class="javascript">      <span class="comment">//网格线</span></span></span><br><span class="line"><span class="javascript">      <span class="attr">lineStyle</span>: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">type</span>: <span class="string">&#x27;dashed&#x27;</span>, <span class="comment">//设置网格线类型 dotted：虚线   solid:实线</span></span></span><br><span class="line"><span class="javascript">        <span class="attr">width</span>: <span class="number">1</span>,</span></span><br><span class="line"><span class="javascript">        <span class="attr">color</span>: <span class="string">&#x27;#00415f&#x27;</span></span></span><br><span class="line"><span class="javascript">      &#125;,</span></span><br><span class="line"><span class="javascript">      <span class="attr">show</span>: <span class="literal">false</span> <span class="comment">//隐藏或显示</span></span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">  &#125;,</span></span><br><span class="line"><span class="javascript">  <span class="attr">yAxis</span>: &#123;</span></span><br><span class="line"><span class="javascript">    <span class="attr">type</span>: <span class="string">&#x27;value&#x27;</span>,</span></span><br><span class="line"><span class="javascript">    <span class="comment">// 分隔线</span></span></span><br><span class="line"><span class="javascript">    <span class="attr">splitLine</span>: &#123;</span></span><br><span class="line"><span class="javascript">      <span class="comment">//控制横坐标往上的横线颜色</span></span></span><br><span class="line"><span class="javascript">      <span class="attr">show</span>: <span class="literal">true</span>,</span></span><br><span class="line"><span class="javascript">      <span class="attr">lineStyle</span>: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">color</span>: [<span class="string">&#x27;#0373A2&#x27;</span>],</span></span><br><span class="line"><span class="javascript">        <span class="attr">width</span>: <span class="number">1</span>,</span></span><br><span class="line"><span class="javascript">        <span class="attr">type</span>: <span class="string">&#x27;solid&#x27;</span></span></span><br><span class="line"><span class="javascript">      &#125;</span></span><br><span class="line"><span class="javascript">    &#125;,</span></span><br><span class="line"><span class="javascript">    <span class="comment">// 坐标轴轴线</span></span></span><br><span class="line"><span class="javascript">    <span class="attr">axisLine</span>: &#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">show</span>: <span class="literal">true</span>,</span></span><br><span class="line"><span class="javascript">      <span class="comment">//控制y轴线的颜色</span></span></span><br><span class="line"><span class="javascript">      <span class="attr">lineStyle</span>: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">color</span>: <span class="string">&#x27;#0373a2&#x27;</span>,</span></span><br><span class="line"><span class="javascript">        <span class="attr">width</span>: <span class="number">1</span> <span class="comment">//这里是为了突出显示加上的</span></span></span><br><span class="line"><span class="javascript">      &#125;</span></span><br><span class="line"><span class="javascript">    &#125;,</span></span><br><span class="line"><span class="javascript">    <span class="comment">// 坐标轴刻度</span></span></span><br><span class="line"><span class="javascript">    <span class="attr">axisTick</span>: &#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">show</span>: <span class="literal">true</span></span></span><br><span class="line"><span class="javascript">    &#125;,</span></span><br><span class="line"><span class="javascript">    <span class="comment">// 刻度标签</span></span></span><br><span class="line"><span class="javascript">    <span class="attr">axisLabel</span>: &#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">show</span>: <span class="literal">true</span>,</span></span><br><span class="line"><span class="javascript">      <span class="attr">textStyle</span>: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">color</span>: <span class="string">&#x27;#e5ebf2&#x27;</span> <span class="comment">//更改坐标轴文字颜色</span></span></span><br><span class="line"><span class="javascript">        <span class="comment">// fontSize: 14, //更改坐标轴文字大小</span></span></span><br><span class="line"><span class="javascript">      &#125;</span></span><br><span class="line"><span class="javascript">    &#125;,</span></span><br><span class="line"><span class="javascript">    <span class="attr">name</span>: <span class="string">&#x27;标识&#x27;</span>,</span></span><br><span class="line"><span class="javascript">    <span class="attr">nameLocation</span>: <span class="string">&#x27;start&#x27;</span>, <span class="comment">//将name配置在原点处下方</span></span></span><br><span class="line"><span class="javascript">    <span class="attr">nameTextStyle</span>: &#123;</span></span><br><span class="line"><span class="javascript">      <span class="comment">//控制name的字体颜色以及对齐方式</span></span></span><br><span class="line"><span class="javascript">      <span class="attr">color</span>: <span class="string">&#x27;#8199b5&#x27;</span>,</span></span><br><span class="line"><span class="javascript">      <span class="attr">align</span>: <span class="string">&#x27;right&#x27;</span></span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">  &#125;,</span></span><br><span class="line"><span class="javascript">  <span class="attr">series</span>: seriesList</span></span><br><span class="line"><span class="javascript">&#125;;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">if</span> (option &amp;&amp; <span class="keyword">typeof</span> option === <span class="string">&#x27;object&#x27;</span>) &#123;</span></span><br><span class="line"><span class="javascript">      myChart.setOption(option);</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">    <span class="built_in">window</span>.addEventListener(<span class="string">&#x27;resize&#x27;</span>, myChart.resize);</span></span><br><span class="line"><span class="javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h5 id="柱状图："><a href="#柱状图：" class="headerlink" title="柱状图："></a>柱状图：</h5><p>（1）练习图例：</p>
<p><img src="/2023/01/06/echarts/image-20230110170250317.png" alt="image-20230110170250317"></p>
<p>（2）配置项:</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">let fakedata = &#123;</span><br><span class="line">  xData: [&#x27;1992&#x27;, &#x27;1993&#x27;, &#x27;1994&#x27;, &#x27;1995&#x27;, &#x27;1996&#x27;],</span><br><span class="line">  ceshi1Data: [20, 30, 40, 50, 60],</span><br><span class="line">  ceshi2Data: [30, 40, 50, 60, 70]</span><br><span class="line">&#125;;</span><br><span class="line">option = &#123;</span><br><span class="line">  title: &#123;</span><br><span class="line">    // text: &#x27;Rainfall vs Evaporation&#x27;,</span><br><span class="line">    // subtext: &#x27;Fake Data&#x27;,</span><br><span class="line">  &#125;,</span><br><span class="line">  grid: &#123;</span><br><span class="line">    height: 200</span><br><span class="line">  &#125;,</span><br><span class="line">  tooltip: &#123;</span><br><span class="line">    trigger: &#x27;axis&#x27;</span><br><span class="line">  &#125;,</span><br><span class="line">  legend: &#123;</span><br><span class="line">    data: [&#x27;ceshi1&#x27;, &#x27;ceshi2&#x27;],</span><br><span class="line">    // bottom: 1,</span><br><span class="line">    orient: &#x27;horizontal&#x27;, //垂直对齐</span><br><span class="line">    icon: &#x27;rect&#x27;, //rect矩形，circle圆形</span><br><span class="line">    // right: 10, //控制legsend居右对齐</span><br><span class="line">    // right: 20,</span><br><span class="line">    // top: 150,</span><br><span class="line">    bottom: 20,</span><br><span class="line">    textStyle: &#123;</span><br><span class="line">      //控制legend的字体颜色和大小</span><br><span class="line">      color: &#x27;#C2E1E7&#x27;,</span><br><span class="line">      fontSize: 12</span><br><span class="line">    &#125;,</span><br><span class="line">    itemWidth: 15,</span><br><span class="line">    itemHeight: 7</span><br><span class="line">  &#125;,</span><br><span class="line">  toolbox: &#123;</span><br><span class="line">    show: false</span><br><span class="line">  &#125;,</span><br><span class="line">  xAxis: [</span><br><span class="line">    &#123;</span><br><span class="line">      type: &#x27;category&#x27;,</span><br><span class="line">      data: fakedata.xData,</span><br><span class="line">      //默认坐标横向显示，这里格式化成竖直方向显示</span><br><span class="line">      axisLabel: &#123;</span><br><span class="line">        // rotate: 40,//旋转角度</span><br><span class="line">        interval: 0,</span><br><span class="line">        formatter: function (value) &#123;</span><br><span class="line">          return value.split(&#x27;&#x27;).join(&#x27;\n&#x27;);</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      axisLine: &#123;</span><br><span class="line">        //控制X轴线的颜色</span><br><span class="line">        lineStyle: &#123;</span><br><span class="line">          color: &#x27;#0373A2&#x27;,</span><br><span class="line">          width: 1 //这里是为了突出显示加上的</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      name: &#x27;单位(%)&#x27;,</span><br><span class="line">      nameLocation: &#x27;start&#x27;, //将name配置在原点处下方</span><br><span class="line">      nameTextStyle: &#123;</span><br><span class="line">        //控制name的字体颜色以及对齐方式</span><br><span class="line">        color: &#x27;#0373A2&#x27;,</span><br><span class="line">        align: &#x27;right&#x27;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  ],</span><br><span class="line">  yAxis: [</span><br><span class="line">    &#123;</span><br><span class="line">      type: &#x27;value&#x27;,</span><br><span class="line">      splitLine: &#123;</span><br><span class="line">        //控制横坐标往上的横线颜色</span><br><span class="line">        show: true,</span><br><span class="line">        lineStyle: &#123;</span><br><span class="line">          color: [&#x27;#0373A2&#x27;],</span><br><span class="line">          width: 1,</span><br><span class="line">          type: &#x27;solid&#x27;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      // 坐标轴轴线</span><br><span class="line">      axisLine: &#123;</span><br><span class="line">        show: true,</span><br><span class="line">        //控制y轴线的颜色</span><br><span class="line">        lineStyle: &#123;</span><br><span class="line">          color: &#x27;#0373a2&#x27;,</span><br><span class="line">          width: 1 //这里是为了突出显示加上的</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  ],</span><br><span class="line">  series: [</span><br><span class="line">    &#123;</span><br><span class="line">      name: &#x27;ceshi1&#x27;,</span><br><span class="line">      type: &#x27;bar&#x27;,</span><br><span class="line">      data: fakedata.ceshi1Data,</span><br><span class="line">      itemStyle: &#123;</span><br><span class="line">        normal: &#123;</span><br><span class="line">          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [</span><br><span class="line">            &#123; offset: 0, color: &#x27;#DB7093&#x27; &#125;,</span><br><span class="line">            &#123; offset: 1, color: &#x27;#FF00FF&#x27; &#125;</span><br><span class="line">          ])</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">      name: &#x27;ceshi2&#x27;,</span><br><span class="line">      type: &#x27;bar&#x27;,</span><br><span class="line">      data: fakedata.ceshi2Data,</span><br><span class="line">      itemStyle: &#123;</span><br><span class="line">        normal: &#123;</span><br><span class="line">          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [</span><br><span class="line">            &#123; offset: 0, color: &#x27;#00BFFF&#x27; &#125;,</span><br><span class="line">            &#123; offset: 1, color: &#x27;#4169E1&#x27; &#125;</span><br><span class="line">          ])</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>



<p>  (3)   完整页面:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;zh-CN&quot;</span> <span class="attr">style</span>=<span class="string">&quot;height: 100%&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;utf-8&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span> <span class="attr">style</span>=<span class="string">&quot;height: 100%; margin: 0&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;container&quot;</span> <span class="attr">style</span>=<span class="string">&quot;height: 100%&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  </span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> <span class="attr">src</span>=<span class="string">&quot;https://fastly.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> dom = <span class="built_in">document</span>.getElementById(<span class="string">&#x27;container&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> myChart = echarts.init(dom, <span class="string">&#x27;dark&#x27;</span>, &#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">renderer</span>: <span class="string">&#x27;canvas&#x27;</span>,</span></span><br><span class="line"><span class="javascript">      <span class="attr">useDirtyRect</span>: <span class="literal">false</span></span></span><br><span class="line"><span class="javascript">    &#125;);</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> app = &#123;&#125;;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> option;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">let</span> fakedata = &#123;</span></span><br><span class="line"><span class="javascript">  <span class="attr">xData</span>: [<span class="string">&#x27;1992&#x27;</span>, <span class="string">&#x27;1993&#x27;</span>, <span class="string">&#x27;1994&#x27;</span>, <span class="string">&#x27;1995&#x27;</span>, <span class="string">&#x27;1996&#x27;</span>],</span></span><br><span class="line"><span class="javascript">  <span class="attr">ceshi1Data</span>: [<span class="number">20</span>, <span class="number">30</span>, <span class="number">40</span>, <span class="number">50</span>, <span class="number">60</span>],</span></span><br><span class="line"><span class="javascript">  <span class="attr">ceshi2Data</span>: [<span class="number">30</span>, <span class="number">40</span>, <span class="number">50</span>, <span class="number">60</span>, <span class="number">70</span>]</span></span><br><span class="line"><span class="javascript">&#125;;</span></span><br><span class="line"><span class="javascript">option = &#123;</span></span><br><span class="line"><span class="javascript">  <span class="attr">title</span>: &#123;</span></span><br><span class="line"><span class="javascript">    <span class="comment">// text: &#x27;Rainfall vs Evaporation&#x27;,</span></span></span><br><span class="line"><span class="javascript">    <span class="comment">// subtext: &#x27;Fake Data&#x27;,</span></span></span><br><span class="line"><span class="javascript">  &#125;,</span></span><br><span class="line"><span class="javascript">  <span class="attr">grid</span>: &#123;</span></span><br><span class="line"><span class="javascript">    <span class="attr">height</span>: <span class="number">200</span></span></span><br><span class="line"><span class="javascript">  &#125;,</span></span><br><span class="line"><span class="javascript">  <span class="attr">tooltip</span>: &#123;</span></span><br><span class="line"><span class="javascript">    <span class="attr">trigger</span>: <span class="string">&#x27;axis&#x27;</span></span></span><br><span class="line"><span class="javascript">  &#125;,</span></span><br><span class="line"><span class="javascript">  <span class="attr">legend</span>: &#123;</span></span><br><span class="line"><span class="javascript">    <span class="attr">data</span>: [<span class="string">&#x27;ceshi1&#x27;</span>, <span class="string">&#x27;ceshi2&#x27;</span>],</span></span><br><span class="line"><span class="javascript">    <span class="comment">// bottom: 1,</span></span></span><br><span class="line"><span class="javascript">    <span class="attr">orient</span>: <span class="string">&#x27;horizontal&#x27;</span>, <span class="comment">//垂直对齐</span></span></span><br><span class="line"><span class="javascript">    <span class="attr">icon</span>: <span class="string">&#x27;rect&#x27;</span>, <span class="comment">//rect矩形，circle圆形</span></span></span><br><span class="line"><span class="javascript">    <span class="comment">// right: 10, //控制legsend居右对齐</span></span></span><br><span class="line"><span class="javascript">    <span class="comment">// right: 20,</span></span></span><br><span class="line"><span class="javascript">    <span class="comment">// top: 150,</span></span></span><br><span class="line"><span class="javascript">    <span class="attr">bottom</span>: <span class="number">20</span>,</span></span><br><span class="line"><span class="javascript">    <span class="attr">textStyle</span>: &#123;</span></span><br><span class="line"><span class="javascript">      <span class="comment">//控制legend的字体颜色和大小</span></span></span><br><span class="line"><span class="javascript">      <span class="attr">color</span>: <span class="string">&#x27;#C2E1E7&#x27;</span>,</span></span><br><span class="line"><span class="javascript">      <span class="attr">fontSize</span>: <span class="number">12</span></span></span><br><span class="line"><span class="javascript">    &#125;,</span></span><br><span class="line"><span class="javascript">    <span class="attr">itemWidth</span>: <span class="number">15</span>,</span></span><br><span class="line"><span class="javascript">    <span class="attr">itemHeight</span>: <span class="number">7</span></span></span><br><span class="line"><span class="javascript">  &#125;,</span></span><br><span class="line"><span class="javascript">  <span class="attr">toolbox</span>: &#123;</span></span><br><span class="line"><span class="javascript">    <span class="attr">show</span>: <span class="literal">false</span></span></span><br><span class="line"><span class="javascript">  &#125;,</span></span><br><span class="line"><span class="javascript">  <span class="attr">xAxis</span>: [</span></span><br><span class="line"><span class="javascript">    &#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">type</span>: <span class="string">&#x27;category&#x27;</span>,</span></span><br><span class="line"><span class="javascript">      <span class="attr">data</span>: fakedata.xData,</span></span><br><span class="line"><span class="javascript">      <span class="comment">//默认坐标横向显示，这里格式化成竖直方向显示</span></span></span><br><span class="line"><span class="javascript">      <span class="attr">axisLabel</span>: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">rotate</span>: <span class="number">40</span>,<span class="comment">//旋转角度</span></span></span><br><span class="line"><span class="javascript">        <span class="attr">interval</span>: <span class="number">0</span>,</span></span><br><span class="line"><span class="javascript">        <span class="comment">// formatter: function (value) &#123;</span></span></span><br><span class="line"><span class="javascript">        <span class="comment">//   return value.split(&#x27;&#x27;).join(&#x27;\n&#x27;);</span></span></span><br><span class="line"><span class="javascript">        <span class="comment">// &#125;</span></span></span><br><span class="line"><span class="javascript">      &#125;,</span></span><br><span class="line"><span class="javascript">      <span class="attr">axisLine</span>: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="comment">//控制X轴线的颜色</span></span></span><br><span class="line"><span class="javascript">        <span class="attr">lineStyle</span>: &#123;</span></span><br><span class="line"><span class="javascript">          <span class="attr">color</span>: <span class="string">&#x27;#0373A2&#x27;</span>,</span></span><br><span class="line"><span class="javascript">          <span class="attr">width</span>: <span class="number">1</span> <span class="comment">//这里是为了突出显示加上的</span></span></span><br><span class="line"><span class="javascript">        &#125;</span></span><br><span class="line"><span class="javascript">      &#125;,</span></span><br><span class="line"><span class="javascript">      <span class="attr">name</span>: <span class="string">&#x27;单位(%)&#x27;</span>,</span></span><br><span class="line"><span class="javascript">      <span class="attr">nameLocation</span>: <span class="string">&#x27;start&#x27;</span>, <span class="comment">//将name配置在原点处下方</span></span></span><br><span class="line"><span class="javascript">      <span class="attr">nameTextStyle</span>: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="comment">//控制name的字体颜色以及对齐方式</span></span></span><br><span class="line"><span class="javascript">        <span class="attr">color</span>: <span class="string">&#x27;#0373A2&#x27;</span>,</span></span><br><span class="line"><span class="javascript">        <span class="attr">align</span>: <span class="string">&#x27;right&#x27;</span></span></span><br><span class="line"><span class="javascript">      &#125;</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">  ],</span></span><br><span class="line"><span class="javascript">  <span class="attr">yAxis</span>: [</span></span><br><span class="line"><span class="javascript">    &#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">type</span>: <span class="string">&#x27;value&#x27;</span>,</span></span><br><span class="line"><span class="javascript">      <span class="attr">splitLine</span>: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="comment">//控制横坐标往上的横线颜色</span></span></span><br><span class="line"><span class="javascript">        <span class="attr">show</span>: <span class="literal">true</span>,</span></span><br><span class="line"><span class="javascript">        <span class="attr">lineStyle</span>: &#123;</span></span><br><span class="line"><span class="javascript">          <span class="attr">color</span>: [<span class="string">&#x27;#0373A2&#x27;</span>],</span></span><br><span class="line"><span class="javascript">          <span class="attr">width</span>: <span class="number">1</span>,</span></span><br><span class="line"><span class="javascript">          <span class="attr">type</span>: <span class="string">&#x27;solid&#x27;</span></span></span><br><span class="line"><span class="javascript">        &#125;</span></span><br><span class="line"><span class="javascript">      &#125;,</span></span><br><span class="line"><span class="javascript">      <span class="comment">// 坐标轴轴线</span></span></span><br><span class="line"><span class="javascript">      <span class="attr">axisLine</span>: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">show</span>: <span class="literal">true</span>,</span></span><br><span class="line"><span class="javascript">        <span class="comment">//控制y轴线的颜色</span></span></span><br><span class="line"><span class="javascript">        <span class="attr">lineStyle</span>: &#123;</span></span><br><span class="line"><span class="javascript">          <span class="attr">color</span>: <span class="string">&#x27;#0373a2&#x27;</span>,</span></span><br><span class="line"><span class="javascript">          <span class="attr">width</span>: <span class="number">1</span> <span class="comment">//这里是为了突出显示加上的</span></span></span><br><span class="line"><span class="javascript">        &#125;</span></span><br><span class="line"><span class="javascript">      &#125;</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">  ],</span></span><br><span class="line"><span class="javascript">  <span class="attr">series</span>: [</span></span><br><span class="line"><span class="javascript">    &#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">name</span>: <span class="string">&#x27;ceshi1&#x27;</span>,</span></span><br><span class="line"><span class="javascript">      <span class="attr">type</span>: <span class="string">&#x27;bar&#x27;</span>,</span></span><br><span class="line"><span class="javascript">      <span class="attr">data</span>: fakedata.ceshi1Data,</span></span><br><span class="line"><span class="javascript">      <span class="attr">itemStyle</span>: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">normal</span>: &#123;</span></span><br><span class="line"><span class="javascript">          <span class="attr">color</span>: <span class="keyword">new</span> echarts.graphic.LinearGradient(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">1</span>, [</span></span><br><span class="line"><span class="javascript">            &#123; <span class="attr">offset</span>: <span class="number">0</span>, <span class="attr">color</span>: <span class="string">&#x27;#DB7093&#x27;</span> &#125;,</span></span><br><span class="line"><span class="javascript">            &#123; <span class="attr">offset</span>: <span class="number">1</span>, <span class="attr">color</span>: <span class="string">&#x27;#FF00FF&#x27;</span> &#125;</span></span><br><span class="line"><span class="javascript">          ])</span></span><br><span class="line"><span class="javascript">        &#125;</span></span><br><span class="line"><span class="javascript">      &#125;</span></span><br><span class="line"><span class="javascript">    &#125;,</span></span><br><span class="line"><span class="javascript">    &#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">name</span>: <span class="string">&#x27;ceshi2&#x27;</span>,</span></span><br><span class="line"><span class="javascript">      <span class="attr">type</span>: <span class="string">&#x27;bar&#x27;</span>,</span></span><br><span class="line"><span class="javascript">      <span class="attr">data</span>: fakedata.ceshi2Data,</span></span><br><span class="line"><span class="javascript">      <span class="attr">itemStyle</span>: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">normal</span>: &#123;</span></span><br><span class="line"><span class="javascript">          <span class="attr">color</span>: <span class="keyword">new</span> echarts.graphic.LinearGradient(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">1</span>, [</span></span><br><span class="line"><span class="javascript">            &#123; <span class="attr">offset</span>: <span class="number">0</span>, <span class="attr">color</span>: <span class="string">&#x27;#00BFFF&#x27;</span> &#125;,</span></span><br><span class="line"><span class="javascript">            &#123; <span class="attr">offset</span>: <span class="number">1</span>, <span class="attr">color</span>: <span class="string">&#x27;#4169E1&#x27;</span> &#125;</span></span><br><span class="line"><span class="javascript">          ])</span></span><br><span class="line"><span class="javascript">        &#125;</span></span><br><span class="line"><span class="javascript">      &#125;</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">  ]</span></span><br><span class="line"><span class="javascript">&#125;;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">if</span> (option &amp;&amp; <span class="keyword">typeof</span> option === <span class="string">&#x27;object&#x27;</span>) &#123;</span></span><br><span class="line"><span class="javascript">      myChart.setOption(option);</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">    <span class="built_in">window</span>.addEventListener(<span class="string">&#x27;resize&#x27;</span>, myChart.resize);</span></span><br><span class="line"><span class="javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>技巧：横坐标倾斜显示。</p>
<p><img src="/2023/01/06/echarts/image-20230110170351429.png" alt="image-20230110170351429"></p>
<p>在x轴的配置项中进行配置:</p>
<figure class="highlight xml"><table><tr><td class="code"><pre><span class="line">axisLabel: &#123;</span><br><span class="line">  rotate: 40,//旋转角度</span><br><span class="line">  interval: 0,</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>

</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://code-ran.gitee.io">牛牛</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://code-ran.gitee.io/2023/01/06/echarts/">https://code-ran.gitee.io/2023/01/06/echarts/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://code-ran.gitee.io" target="_blank">牛牛&blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/echarts/">echarts</a></div><div class="post_share"><div class="social-share" data-image="" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/2023/02/02/javascript%E5%AD%A6%E4%B9%A0/"><img class="prev-cover" src="" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">javascript学习</div></div></a></div><div class="next-post pull-right"><a href="/2022/12/26/sql%E9%87%8D%E8%A6%81%E7%9F%A5%E8%AF%86%E6%80%BB%E7%BB%93/"><img class="next-cover" src="" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">sql重要知识总结</div></div></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="/img/ys.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">牛牛</div><div class="author-info__description"></div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">52</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">26</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">26</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/code-ran"><i class="fab fa-github"></i><span>Follow Me</span></a></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content">本blog内容仅用于个人学习使用!</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-5"><a class="toc-link" href="#1%E3%80%81%E9%A5%BC%E5%9B%BE%E5%B5%8C%E5%A5%97"><span class="toc-number">1.</span> <span class="toc-text">1、饼图嵌套:</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E4%BB%AA%E8%A1%A8%E7%9B%98%EF%BC%9A"><span class="toc-number">2.</span> <span class="toc-text">仪表盘：</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E6%9B%B2%E7%BA%BF%E5%9B%BE%EF%BC%9A"><span class="toc-number">3.</span> <span class="toc-text">曲线图：</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E6%9F%B1%E7%8A%B6%E5%9B%BE%EF%BC%9A"><span class="toc-number">4.</span> <span class="toc-text">柱状图：</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2024/04/30/springboot%E6%B3%A8%E8%A7%A3%E7%9B%B8%E5%85%B3/" title="springboot注解相关">springboot注解相关</a><time datetime="2024-04-30T03:20:37.000Z" title="发表于 2024-04-30 11:20:37">2024-04-30</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2024/04/30/CommandLineRunner%E5%92%8CApplicationRunner%E7%94%A8%E6%B3%95%E4%B8%8E%E5%8C%BA%E5%88%AB/" title="CommandLineRunner和ApplicationRunner用法与区别">CommandLineRunner和ApplicationRunner用法与区别</a><time datetime="2024-04-30T02:42:21.000Z" title="发表于 2024-04-30 10:42:21">2024-04-30</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2023/12/08/%E5%A5%BD%E6%96%87%E6%94%B6%E8%97%8F/" title="好文收藏">好文收藏</a><time datetime="2023-12-08T08:40:13.000Z" title="发表于 2023-12-08 16:40:13">2023-12-08</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2023/12/08/springboot%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0%E4%B8%8B%E8%BD%BD/" title="springboot文件上传下载">springboot文件上传下载</a><time datetime="2023-12-08T03:30:54.000Z" title="发表于 2023-12-08 11:30:54">2023-12-08</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2023/12/05/linux%E4%BD%BF%E7%94%A8curl%E5%91%BD%E4%BB%A4%E5%8F%91%E9%80%81%E8%AF%B7%E6%B1%82/" title="linux使用curl命令发送请求">linux使用curl命令发送请求</a><time datetime="2023-12-05T05:56:19.000Z" title="发表于 2023-12-05 13:56:19">2023-12-05</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2021 - 2024 By 牛牛</div><div class="footer_custom_text">Hi, Welcome to my blog!</div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="translateLink" type="button" title="简繁转换">簡</button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="/js/tw_cn.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.min.js"></script><div class="js-pjax"></div><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div></body></html>